import 'package:flutter/material.dart';
import 'package:ninetyfour/l10n/app_localizations.dart';

typedef OrderSearchCallback = void Function(String keyword);

class OrderSearchView extends StatefulWidget {
  final OrderSearchCallback onSearchClick;

  const OrderSearchView({Key? key, required this.onSearchClick}) : super(key: key);

  @override
  State<OrderSearchView> createState() => OrderSearchViewState();
}

class OrderSearchViewState extends State<OrderSearchView> with SingleTickerProviderStateMixin {
  final TextEditingController _controller = TextEditingController();
  bool _visible = false;
  late AnimationController _animationController;
  late Animation<double> _fadeAnimation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(vsync: this, duration: const Duration(milliseconds: 300));
    _fadeAnimation = Tween<double>(begin: 0, end: 1).animate(_animationController);
  }

  void show() {
    if (!_visible) {
      setState(() => _visible = true);
      _animationController.forward();
    }
  }

  void hide() {
    if (_visible) {
      FocusScope.of(context).unfocus(); // 关闭键盘
      _animationController.reverse().then((_) {
        setState(() => _visible = false);
      });
    }
  }

  void _onSearchPressed() {
    if (_controller.text.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text(AppLocalizations.of(context)!.pleaseEnterProduct)),
      );
    } else {
      widget.onSearchClick(_controller.text);
    }
  }

  void _onBackPressed() {
    _controller.clear();
    hide();
  }

  @override
  Widget build(BuildContext context) {
    if (!_visible) return const SizedBox.shrink();

    return FadeTransition(
      opacity: _fadeAnimation,
      child: Container(
        color: Colors.white, // mainBgColor
        child: Stack(
          children: [
            // 搜索框
            Positioned(
              left: 20,
              right: 55,
              top: 5,
              child: Container(
                height: 36,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(18),
                  border: Border.all(color: Colors.blue), // titleBlueColor
                ),
                child: Row(
                  children: [
                    const Padding(
                      padding: EdgeInsets.only(left: 15, right: 10),
                      child: Icon(Icons.search, size: 20),
                    ),
                    Expanded(
                      child: TextField(
                        controller: _controller,
                        onChanged: (value) {
                          if (value.contains(' ')) {
                            final newText = value.replaceAll(' ', '');
                            _controller.value = TextEditingValue(
                              text: newText,
                              selection: TextSelection.collapsed(offset: newText.length),
                            );
                          }
                        },
                        decoration: InputDecoration(
                          hintText: '${AppLocalizations.of(context)!.rechargeType} / ${AppLocalizations.of(context)!.orderNumber}',
                          border: InputBorder.none,
                          isDense: true,
                          contentPadding: EdgeInsets.zero,
                        ),
                        style: const TextStyle(fontSize: 15),
                      ),
                    ),
                    Container(
                      margin: const EdgeInsets.only(right: 3),
                      height: 30,
                      width: 60,
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          backgroundColor: Color(0xFF5D5FEE),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(16),
                          ),
                          padding: EdgeInsets.zero,
                        ),
                        onPressed: _onSearchPressed,
                        child: Text(AppLocalizations.of(context)!.search, style: TextStyle(fontSize: 14,color: Colors.white)),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // 关闭按钮
            Positioned(
              right: 15,
              top: 0,
              child: IconButton(
                icon: const Icon(Icons.close),
                onPressed: _onBackPressed,
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    _animationController.dispose();
    super.dispose();
  }
}
